<template>
  <transition name="fade">
    <div class="rocket" ref="rocket" v-show="isVisible" @click="clickRocket" @mouseenter="enterRocket" @mouseleave="leaveRocket"></div>
  </transition>
</template>

<script>
  import { scroll } from "@/utils/core";
  import Animate from "@/utils/animate";

  export default {
    props: {
      // 页面向下滚动到多少距离才显示火箭
      visibleHeight: {
        type: Number,
        default: 100
      },
      // 火箭的位置
      customStyle: {
        type: Object,
        default () {
          return {
            bottom: "20px",
            right: "30px"
          }
        }
      },
      // 火箭滚动所用的时间
      duration: {
        type: Number,
        default: 500
      }
    },
    data() {
      return {
        isClickRocket: false,
        isVisible: false,
        scrollElem: null,
      }
    },
    mounted() {
      this.scrollElem = document.querySelector('.inner-layout__page');
      this.scrollElem.addEventListener("scroll", this.handleRocketShow);
      const rocket = this.$refs.rocket;
      rocket.style.bottom = this.customStyle.bottom;
      rocket.style.right = this.customStyle.right;

    },
    destroyed() {
      this.scrollElem.removeEventListener("scroll", this.handleRocketShow);
    },
    methods: {
      // 当页面向下滚动到移动距离时火箭才显示
      handleRocketShow() {
        if (this.scrollElem.scrollTop > this.visibleHeight) {
          this.isVisible = true;
        } else {
          // 如果没有点击火箭，火箭才不显示，不然当火箭向上移动到visibleHeight的位置时就会消失
          if (this.isClickRocket === false) {
            this.isVisible = false;
          }
        }
      },
      // 火箭和页面的运动都结束之后执行的回调
      callback() {
        this.isClickRocket = false;
        this.isVisible = false;
        this.changeRocketImagePosition("-31px -15px");
        // 火箭不能在向上移动到目标位置之后就立刻定位到原来的位置，因为它消失的过程有个渐进的动画，完全隐藏之后再进行定位。
        setTimeout(() => {
          this.$refs.rocket.style.bottom = this.customStyle.bottom;
        }, 500)
      },
      // 点击火箭的时候，一方面页面先快后慢滚动到顶部，一方面火箭先慢后快移动直到消失。
      clickRocket(event) {
        this.isClickRocket = true;
        this.changeRocketImagePosition("-204px -15px");
        const callback = () => {
          this.isClickRocket = false;
          this.isVisible = false;
          this.changeRocketImagePosition("-31px -15px");
          // 火箭不能在向上移动到目标位置之后就立刻定位到原来的位置，因为它消失的过程有个渐进的动画，完全隐藏之后再进行定位。
          setTimeout(() => {
            this.$refs.rocket.style.bottom = this.customStyle.bottom;
          }, 500)
        }
        scroll(this.scrollElem, 0, 800);
        const animate = new Animate(this.$refs.rocket);
        //设置火箭移动花费的时间比页面要慢点，然后在火箭运动结束后执行回调
        animate.start("bottom", window.innerHeight, 850, "easeIn", callback);

      },
      enterRocket() {
        this.changeRocketImagePosition("-117px -15px");
      },
      leaveRocket() {
        if (this.isClickRocket == false) {
          this.changeRocketImagePosition("-31px -15px");
        }
      },
      // 切换火箭的图片
      changeRocketImagePosition(position) {
        this.$refs.rocket.style.backgroundPosition = position;
      }
    },
  }
</script>

<style scoped>
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }

  .rocket {
    position: fixed;
    width: 31px;
    height: 76px;
    background: url(~@/assets/images/common/rocket.png) no-repeat -31px -15px;
    cursor: pointer;
    z-index: 10000;
  }
</style>
